
<ion-content padding id="bg-img" >
  <ion-grid>
    <ion-row>
      <ion-col col-12 class="login-title">
     安家|登录
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col col-12>
        <form  [formGroup]="loginForm" (ngSubmit)="login(loginForm.value)" novalidate>
          <ion-item [class.error]="!username.valid && username.touched">
            <ion-input type="tel" placeholder="请输入用户名"  [formControl]="username" clearInput=true></ion-input>
          </ion-item>
          <ion-label *ngIf="username.hasError('required') && username.touched" class="error-message">* 请输入用户名</ion-label>
          <ion-label *ngIf="(username.hasError('minlength')||username.hasError('maxlength')||username.hasError('pattern')) && username.touched" class="error-message">* 请输入正确的电话号码</ion-label>
          <ion-item>
            <ion-input type="password" placeholder="请输入密码"  [formControl]="password" clearInput=true></ion-input>
          </ion-item>
          <ion-label *ngIf="password.hasError('required') && password.touched" class="error-message">* 请输入密码</ion-label>
          <ion-label *ngIf="(password.hasError('minlength')) && password.touched" class="error-message">* 密码长度最少为六位</ion-label>
          <button ion-button block color="secondary" type="submit" [disabled]="!loginForm.valid" id="login-button">登录</button>
        </form>

      </ion-col>
      <!--end form-->
      <ion-col col-6>
        <a href="#">忘记密码 ？</a>
      </ion-col>
      <ion-col col-6 style="text-align: right">
        <a href="#">通过验证码登录</a>
      </ion-col>
    </ion-row>


  </ion-grid>

  <ion-footer >
    <ion-toolbar style="background-color: white !important;">
      <p style="text-align: center;">
        没有账号 ？ <a  (click)="toRegister()">立即注册</a>
      </p>

    </ion-toolbar>
  </ion-footer>

</ion-content>
